<meta http-equiv="content-type" content="text/html" charset="UTF-8">

<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../js/layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>

<link rel="stylesheet" type="text/css" href="../../js//layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="../../css/bingAdmin.css">
<link rel="stylesheet" type="text/css" href="../../css/view/commonEdit.css">

<div class="wrap">
  <form class="layui-form layui-form-pane" action="">
    <div class="left">
      <div class="layui-form-item">
        <label class="layui-form-label">系统</label>
        <div class="layui-input-inline">
          <select name="system" lay-verify="required" lay-filter="system">
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="project" lay-filter="project">
            <option value="">项目 (可选)</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">地点</label>
        <div class="layui-input-inline">
          <select name="site" lay-filter="site">
            <option value="">地点 (可选)</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="stn" lay-filter="stn">
            <option value="">位置 (可选)</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline">
          <select name="type" lay-verify="required" lay-filter="type">
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="style" lay-verify="required" lay-filter="style">
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">到货日期</label>
          <div class="layui-input-block">
            <input name="delivery" id="date1" autocomplete="off" class="layui-input" type="text" lay-verify="required">
          </div>
        </div>
      </div>
      
      <div class="layui-form-item">
        <label class="layui-form-label">设备编号</label>
        <div class="layui-input-block">
          <input name="sn" autocomplete="off" placeholder="编号或别名" class="layui-input" type="text" lay-verify="required" style="width:329px;">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <input name="remark" autocomplete="off" placeholder="备注" class="layui-input" type="text" style="width:329px;">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
          <select name="status" lay-verify="required">
            <option value="0">备件</option>
            <option value="1">在用</option>
            <option value="2">故障</option>
            <option value="3">维修</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn" lay-submit="" lay-filter="edit">保存</button>
        <button class="layui-btn layui-btn-primary" id="cancel">取消</button>
      </div>
    </div>
    
    <div class="right">
      <div class="more-wrap">
        <div class="more-btn">
          <span class="layui-icon layui-icon-add-1"></span>
          <span class="more-text">更多信息</span>
        </div>
      </div>
    
    </div>
  </form>
  
  
</div>
<script>
var access_token = sessionStorage.access_token;
var userId = sessionStorage.userid;

layui.use(['form','laydate'], function(){
  var form = layui.form;
  var laydate = layui.laydate;
  //获取基本数据
  var id = getPar('id');
  var rowData = parent.rowData[id]; 
  $('input[name="sn"]').val(rowData.SN);
  $('input[name="remark"]').val(rowData.REMARK);
  $('select[name="status"]').val(rowData.STATUS_ID);
  
  form.render();
  laydate.render({
    elem: '#date1',   //指定元素
    value:rowData.DELIVERY_DATE
  });
  
  //初始化select
  $('select[name="type"]').attr('disabled','disabled');
  $('select[name="site"]').attr('disabled','disabled');
  $('select[name="style"]').attr('disabled','disabled');
  $('select[name="stn"]').attr('disabled','disabled');
  
  var selectData;
  //获取select选项
  $.ajax({
    url: rootpath + '/actionApi/Device/select',
    type:'post',
    data:{"userId":userId},
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      selectData = res.data;
      var systemList = selectData.system;
      var projectList = selectData.project;
      for(var key in systemList){
        $('select[name="system"]').append('<option value="'+key+'">'+systemList[key]+'</option>');
      }
      $('select[name="system"]').val(rowData.SYSTEM_ID);
      
      form.render('select');
      selectInit($('select[name="system"]').val());
    }
  });
  
  //系统select选择事件
  form.on('select(system)', function(data){
    selectInit(data.value);
  });
  
  //初始化系统select菜单方法
  function selectInit(systemId){
    $('select[name="project"]').attr('disabled','disabled');
    $('select[name="project"]').html('<option value="">项目 (可选)</option>');
    $('select[name="site"]').attr('disabled','disabled');
    $('select[name="site"]').html('<option value="">地点 (可选)</option>');
    $('select[name="stn"]').attr('disabled','disabled');
    $('select[name="stn"]').html('<option value="">位置 (可选)</option>');
    $('select[name="type"]').attr('disabled','disabled');
    $('select[name="type"]').html('<option value="">类型</option>');
    $('select[name="style"]').attr('disabled','disabled');
    $('select[name="style"]').html('<option value="">式样</option>');
    //如果系统里有项目，项目select增加选项并启用
    if(selectData.project[systemId]){
      $('select[name="project"]').removeAttr('disabled');
      $('select[name="project"]').html('<option value="">项目 (可选)</option>');
      for(var key in selectData.project[systemId]){
        $('select[name="project"]').append('<option value="'+key+'">'+selectData.project[systemId][key]+'</option>');
      }
      $('select[name="project"]').val(rowData.PROJECT_ID);
    }
    //如果系统里有地点，地点select增加选项并启用
    if(selectData.site[systemId]){
      $('select[name="site"]').removeAttr('disabled');
      $('select[name="site"]').html('<option value="">地点 (可选)</option>');
      for(var key in selectData.site[systemId]){
        $('select[name="site"]').append('<option value="'+key+'">'+selectData.site[systemId][key]+'</option>');
      }
      $('select[name="site"]').val(rowData.SITE_ID);
    }
    //如果系统里有类型，类型select增加选项并启用
    if(selectData.type[systemId]){
      $('select[name="type"]').removeAttr('disabled');
      $('select[name="type"]').html('<option value="">类型</option>');
      for(var key in selectData.type[systemId]){
        $('select[name="type"]').append('<option value="'+key+'">'+selectData.type[systemId][key]+'</option>');
      }
      $('select[name="type"]').val(rowData.TYPE_ID);
    }
    //如果数据里有位置，位置select增加选项并启用
    if(selectData.stn[rowData.SITE_ID]){
      $('select[name="stn"]').removeAttr('disabled');
      $('select[name="stn"]').html('<option value="">位置 (可选)</option>');
      for(var key in selectData.stn[rowData.SITE_ID]){
        $('select[name="stn"]').append('<option value="'+key+'">'+selectData.stn[rowData.SITE_ID][key]+'</option>');
      }
      $('select[name="stn"]').val(rowData.STN_ID);
    }
    //如果数据里有式样，式样select增加选项并启用
    if(selectData.style[rowData.TYPE_ID]){
      $('select[name="style"]').removeAttr('disabled');
      $('select[name="style"]').html('<option value="">式样 (可选)</option>');
      for(var key in selectData.style[rowData.TYPE_ID]){
        $('select[name="style"]').append('<option value="'+key+'">'+selectData.style[rowData.TYPE_ID][key]+'</option>');
      }
      $('select[name="style"]').val(rowData.STYLE_ID);
    }
    
    form.render('select');
    
  }

  //地点select选择事件
  form.on('select(site)', function(data){
    var siteId = data.value;
    //位置select增加选项
    if(selectData.stn[siteId]){
      $('select[name="stn"]').removeAttr('disabled');
      $('select[name="stn"]').html('<option value="">位置 (可选)</option>');
      for(var key in selectData.stn[siteId]){
        $('select[name="stn"]').append('<option value="'+key+'">'+selectData.stn[siteId][key]+'</option>');
      }
    }else{
      $('select[name="stn"]').attr('disabled','disabled');
      $('select[name="stn"]').html('<option value="">位置 (可选)</option>');
    }
    form.render('select');
  });
  
  //类型select选择事件
  form.on('select(type)', function(data){
    var typeId = data.value;
    //式样select增加选项
    if(selectData.style[typeId]){
      $('select[name="style"]').removeAttr('disabled');
      $('select[name="style"]').html('<option value="">式样</option>');
      for(var key in selectData.style[typeId]){
        $('select[name="style"]').append('<option value="'+key+'">'+selectData.style[typeId][key]+'</option>');
      }
    }else{
      $('select[name="style"]').attr('disabled','disabled');
      $('select[name="style"]').html('<option value="">式样</option>');
    }
    form.render('select');
  });
  

  getMoreInfo(rowData.DEV_ID);  //获取更多信息
  
  //获取更多信息函数
  function getMoreInfo(devId){
    $.ajax({
      url: rootpath + '/actionApi/Device/more',
      type:'post',
      data:{"devId":devId},
      headers:{"Authorization":"Basic "+access_token},
      success:function(res){
        if(Object.keys(res.data).length!=0){
          for(var key in res.data){
            $('.more-wrap').prepend(
              '<div class="layui-form-item addItem">'+
              '<label class="layui-form-label"><input type="text" value="'+key+'" class="info-input"></label>'+
              '<div class="layui-input-inline">'+
              '<input type="text" name="'+key+'" placeholder="" value="'+res.data[key]+'" autocomplete="off" class="layui-input">'+
              '<div class="delBtn"><span class="layui-icon">&#x1006;</span></div></div></div>');
          }
        }
      }
    });
  }
  
  //console.log(rowData);
  //保存编辑按钮点击事件
  form.on('submit(edit)', function(data){
    data.field["userId"] = userId;  //表单数据中增加用户名
    data.field["devId"] = rowData.DEV_ID;  //表单数据中增加设备ID
    $.ajax({
      url: rootpath + '/actionApi/Device/edit',
      type:'post',
      data:{
        "":JSON.stringify(data.field)
      },
      headers:{"Authorization":"Basic "+access_token},
      success:function(res){
        if(res.code==0){
          parent.tableRef = true;
          parent.layer.msg("修改成功");
          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
          parent.layer.close(index); //再执行关闭   
        }else{
          layer.msg("修改失败");
        }
      }
    });
    
    return false;
  });
  //取消按钮点击事件
  $('#cancel').click(function(){
    //当你在iframe页面关闭自身时
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index); //再执行关闭   
  });
  
  //增加更多信息点击事件
  $('.more-btn').click(function(){
    var self = $(this);
    infoHtml = '<div class="layui-form-item addItem">'+
                 '<label class="layui-form-label">'+
                   '<input type="text" value="" class="info-input">'+
                 '</label>'+
                 '<div class="layui-input-inline">'+
                   '<input type="text" name="" placeholder="" value="" autocomplete="off" class="layui-input">'+
                   '<div class="delBtn"><span class="layui-icon">&#x1006;</span></div>'+
                 '</div>'+
               '</div>';
    self.before(infoHtml);
  });
  
  //增加条目-名称输入监听
  $('body').on('blur', '.info-input', function(){
    var self = $(this);
    self.parent().parent().find('.layui-input').attr('name',self.val());
    
  });

  //增加条目-鼠标移入监听-显示删除按钮
  $('body').on('mouseover', '.addItem', function(){
    var self = $(this);
    self.find('.delBtn').show();
  });
  $('body').on('mouseout', '.addItem', function(){
    var self = $(this);
    self.find('.delBtn').hide();
  });

  //增加条目-删除按钮点击事件
  $('body').on('click', '.delBtn', function(){
    var self = $(this);
    self.parent().parent().remove();
  });
  
  
});



</script>